<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="王赛 <wangsai@bootcss.com>">

<title>
  
    起步 &middot; Bootstrap 中文文档
  
</title>

<!-- Bootstrap core CSS -->
<link href="../../cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" tppabs="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<link href="../assets/css/patch.css" tppabs="http://v3.bootcss.com/assets/css/patch.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" tppabs="http://v3.bootcss.com/assets/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js" tppabs="http://v3.bootcss.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../assets/js/ie-emulation-modes-warning.js" tppabs="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js" tppabs="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="../../cdn.bootcss.com/respond.js/1.4.2/respond.min.js" tppabs="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">

  </head>
  <body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="../index.htm" tppabs="http://v3.bootcss.com/" class="navbar-brand">Bootstrap</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="index.htm" tppabs="http://v3.bootcss.com/getting-started">起步</a>
        </li>
        <li>
          <a href="../css/index.htm" tppabs="http://v3.bootcss.com/css">全局 CSS 样式</a>
        </li>
        <li>
          <a href="../components/index.htm" tppabs="http://v3.bootcss.com/components">组件</a>
        </li>
        <li>
          <a href="../javascript/index.htm" tppabs="http://v3.bootcss.com/javascript">JavaScript 插件</a>
        </li>
        <li>
          <a href="../customize/index.htm" tppabs="http://v3.bootcss.com/customize">定制</a>
        </li>
      </ul>
      
    </nav>
  </div>
</header>


    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
      <div class="container">
        <h1>起步</h1>
        <p>简要介绍 Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。</p>
        
      </div>
    </div>

    <div class="container bs-docs-container">

      <div class="row">
        <div class="col-md-9" role="main">
          <div class="bs-docs-section">
  <h1 id="download" class="page-header">下载</h1>

  <p class="lead">Bootstrap （当前版本 v3.2.0）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。</p>

  <div class="row bs-downloads">
    <div class="col-sm-4">
      <h3 id="download-bootstrap">用于生产环境的 Bootstrap</h3>
      <p>编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。</p>
      <p>
        <a href="http://d.bootcss.com/bootstrap-3.2.0-dist.zip" class="btn btn-lg btn-outline" role="button" >下载 Bootstrap</a>
      </p>
    </div>
    <div class="col-sm-4">
      <h3 id="download-source">Bootstrap 源码</h3>
      <p>Less、JavaScript 和 字体文件的源码，并且带有文档。<strong>需要 Less 编译器和<a href="#grunt">一些设置工作</a></strong>。</p>
      <p>
        <a href="http://d.bootcss.com/bootstrap-3.2.0.zip" class="btn btn-lg btn-outline" role="button" >下载源码</a>
      </p>
    </div>
    <div class="col-sm-4">
      <h3 id="download-sass">Sass</h3>
      <p><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap-sass  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap-sass%27" tppabs="https://github.com/twbs/bootstrap-sass">这是 Bootstrap 从 Less 到 Sass 的源码移植项目</a>，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。</p>
      <p>
        <a href="http://d.bootcss.com/bootstrap-sass-3.2.0.tar.gz" class="btn btn-lg btn-outline" role="button" >下载 Sass 项目</a>
      </p>
    </div>
  </div>

  <h3 id="download-cdn">使用 Bootstrap 中文网提供的免费 CDN 加速服务</h3>
  <p><a href="javascript:if(confirm(%27http://www.bootcss.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.bootcss.com/%27" tppabs="http://www.bootcss.com/">Bootstrap 中文网</a> 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入<a href="javascript:if(confirm(%27http://open.bootcss.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://open.bootcss.com/%27" tppabs="http://open.bootcss.com/"
  >BootCDN 主页</a>查看更多可用的工具库。</p>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- 新 Bootstrap 核心 CSS 文件 --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- 可选的Bootstrap主题文件（一般不用引入） --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot;</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>

<span class="c">&lt;!-- 最新的 Bootstrap 核心 JavaScript 文件 --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>

  <h3 id="download-bower">通过 Bower 进行安装</h3>
  <p>通过 <a href="javascript:if(confirm(%27http://bower.io/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://bower.io/%27" tppabs="http://bower.io/">Bower</a> 可以安装并管理 Bootstrap 的Less、CSS、JavaScript和字体文件。</p>
  <div class="highlight"><pre><code class="bash"><span class="nv">$ </span>bower install bootstrap
</code></pre></div>
</div>

<div class="bs-docs-section">
  <h1 id="whats-included" class="page-header">包含的内容</h1>

  <p class="lead">Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。</p>

  <div class="bs-callout bs-callout-warning" id="jquery-required">
    <h4>Bootstrap 插件全部依赖 jQuery</h4>
    <p>请注意，<strong>Bootstrap 的所有 JavaScript 插件都依赖 jQuery，</strong>因此 jQuery 必须在 Bootstrap 之前引入，就像在<a href="#template">基本模版</a>中所展示的一样。在<a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/v3.2.0/bower.json  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/v3.2.0/bower.json%27" tppabs="https://github.com/twbs/bootstrap/blob/v3.2.0/bower.json"> <code>bower.json</code> 文件中</a> 列出了 Bootstrap 所支持的 jQuery 版本。</p>
  </div>

  <h2 id="whats-included-precompiled">预编译版</h2>
  <p>下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<div class="highlight"><pre><code class="bash">bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
</code></pre></div>

  <p>这是最基本的 Bootstrap 文件组织形式：未压缩版的文件可以在任意web项目中直接使用。我们同时提供了压缩（<code>bootstrap.min.*</code>）与未压缩 (<code>bootstrap.*</code>) 的 CSS 和 JS 文件。字体图标文件来自于 Glyphicons。</p>

  <h2 id="whats-included-source">Bootstrap 源码</h2>
  <p>Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：</p>
<div class="highlight"><pre><code class="bash">bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/
</code></pre></div>
  <p><code>less/</code>、<code>js/</code> 和 <code>fonts/</code> 目录分别包含了 CSS、JS 和字体图标的源码。<code>dist/</code> 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。<code>docs/</code> 包含了所有文档的源码文件，<code>examples/</code> 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。</p>
</div>

<div class="bs-docs-section">
  <h1 id="grunt" class="page-header">编译 CSS 和 JavaScript 文件</h1>

  <p class="lead">Bootstrap 使用 <a href="javascript:if(confirm(%27http://gruntjs.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://gruntjs.com/%27" tppabs="http://gruntjs.com/">Grunt</a> 作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。</p>

  <h2 id="grunt-installing">安装 Grunt</h2>
  <p>安装 Grunt 前，你需要<strong>首先<a href="javascript:if(confirm(%27http://nodejs.org/download/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://nodejs.org/download/%27" tppabs="http://nodejs.org/download/">下载并安装 node.js</a></strong> （npm 已经包含在内）。npm 是 <a href="javascript:if(confirm(%27http://npmjs.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://npmjs.org/%27" tppabs="http://npmjs.org/">node packaged modules</a> 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。</p>

  然后在命令行中输入以下命令：
  <ol>
    <li>在全局环境中安装 <code>grunt-cli</code> ：<code>npm install -g grunt-cli</code> 。</li>
    <li>进入 <code>/bootstrap/</code> 根目录，然后执行 <code>npm install</code> 命令。npm 将读取 <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/master/package.json  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/master/package.json%27" tppabs="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> 文件并自动安装此文件中列出的所有被依赖的扩展包。</li>
  </ol>

  <p>上述步骤完成后，你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。</p>

  <h2 id="grunt-commands">可用的 Grunt 命令</h2>
  <h3><code>grunt dist</code> （仅编译 CSS 和 JavaScript 文件）</h3>
  <p>重新生成 <code>/dist/</code> 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。</p>

  <h3><code>grunt watch</code> （监测文件的改变，并运行指定的 Grunt 任务）</h3>
  <p>监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。</p>

  <h3><code>grunt test</code> （运行测试用例）</h3>
  <p>在 <a href="javascript:if(confirm(%27http://phantomjs.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://phantomjs.org/%27" tppabs="http://phantomjs.org/">PhantomJS</a> 环境中运行 <a href="javascript:if(confirm(%27http://jshint.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://jshint.com/%27" tppabs="http://jshint.com/">JSHint</a> 和 <a href="javascript:if(confirm(%27http://qunitjs.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://qunitjs.com/%27" tppabs="http://qunitjs.com/">QUnit</a> 自动化测试用例。

  <h3><code>grunt</code> （重新构建所有内容并运行测试用例）</h3>
  <p>编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等。此命令只有在你对 Bootstrap 深度研究时才有用。</p>

  <h2 id="grunt-troubleshooting">除错</h2>
  <p>如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 <code>/node_modules/</code> 目录，然后，再次运行 <code>npm install</code> 命令。</p>
</div>

<div class="bs-docs-section">
  <h1 id="template" class="page-header">基本模板</h1>

  <p class="lead">使用以下给出的这份超级简单的 HTML 模版，或者修改<a href="#examples">这些实例</a>。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。</p>

  <p>拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。</p>
<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;zh-cn&quot;</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">&quot;utf-8&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content=</span><span class="s">&quot;IE=edge&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;title&gt;</span>Bootstrap 101 Template<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Bootstrap --&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&quot;css/bootstrap.min.css&quot;</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span><span class="nt">&gt;</span>

    <span class="c">&lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;</span>
    <span class="c">&lt;!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// --&gt;</span>
    <span class="c">&lt;!--[if lt IE 9]&gt;</span>
<span class="c">      &lt;script src=&quot;http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;</span>
<span class="c">      &lt;script src=&quot;http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;</span>
<span class="c">    &lt;![endif]--&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>你好，世界！<span class="nt">&lt;/h1&gt;</span>

    <span class="c">&lt;!-- jQuery (necessary for Bootstrap&#39;s JavaScript plugins) --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="c">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;js/bootstrap.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
</div>

<div class="bs-docs-section">
  <h1 id="examples" class="page-header">实例精选</h1>

  <p class="lead">以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。</p>

  <h3 id="examples-framework">Bootstrap 框架的基本用法</h3>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/starter-template/index.htm" tppabs="http://v3.bootcss.com/examples/starter-template/">
        <img src="../examples/screenshots/starter-template.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/starter-template.jpg" alt="">
      </a>
      <h4>入门级模板</h4>
      <p>只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 <code>container</code> 元素。</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/theme/index.htm" tppabs="http://v3.bootcss.com/examples/theme/">
        <img src="../examples/screenshots/theme.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/theme.jpg" alt="">
      </a>
      <h4>Bootstrap 主题</h4>
      <p>加载可选的 Bootstrap 主题，获得增强的视觉体验。</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/grid/index.htm" tppabs="http://v3.bootcss.com/examples/grid/">
        <img src="../examples/screenshots/grid.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/grid.jpg" alt="">
      </a>
      <h4>栅格</h4>
      <p>多个关于栅格布局方面的实例，涉及到层级（tier）、嵌套（nesting）等等。</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/jumbotron/index.htm" tppabs="http://v3.bootcss.com/examples/jumbotron/">
        <img src="../examples/screenshots/jumbotron.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/jumbotron.jpg" alt="">
      </a>
      <h4>Jumbotron</h4>
      <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/jumbotron-narrow/index.htm" tppabs="http://v3.bootcss.com/examples/jumbotron-narrow/">
        <img src="../examples/screenshots/jumbotron-narrow.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/jumbotron-narrow.jpg" alt="">
      </a>
      <h4>Narrow jumbotron</h4>
      <p>Build a more custom page by narrowing the default container and jumbotron.</p>
    </div>
  </div>

  <h3 id="examples-navbars">导航条实战</h3>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/navbar/index.htm" tppabs="http://v3.bootcss.com/examples/navbar/">
        <img src="../examples/screenshots/navbar.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/navbar.jpg" alt="">
      </a>
      <h4>导航条</h4>
      <p>包含导航条和一起附加内容的超级基础的模板。</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/navbar-static-top/index.htm" tppabs="http://v3.bootcss.com/examples/navbar-static-top/">
        <img src="../examples/screenshots/navbar-static.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/navbar-static.jpg" alt="">
      </a>
      <h4>静态导航条</h4>
      <p>包含一个静态导航条以及一些附加内容的超级基础的模板。</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/navbar-fixed-top/index.htm" tppabs="http://v3.bootcss.com/examples/navbar-fixed-top/">
        <img src="../examples/screenshots/navbar-fixed.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/navbar-fixed.jpg" alt="">
      </a>
      <h4>Fixed navbar</h4>
      <p>Super basic template with a fixed top navbar along with some additional content.</p>
    </div>
  </div>

  <h3 id="examples-custom">自定义组件</h3>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/cover/index.htm" tppabs="http://v3.bootcss.com/examples/cover/">
        <img src="../examples/screenshots/cover.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/cover.jpg" alt="">
      </a>
      <h4>Cover</h4>
      <p>A one-page template for building simple and beautiful home pages.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/carousel/index.htm" tppabs="http://v3.bootcss.com/examples/carousel/">
        <img src="../examples/screenshots/carousel.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/carousel.jpg" alt="">
      </a>
      <h4>Carousel</h4>
      <p>Customize the navbar and carousel, then add some new components.</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/blog/index.htm" tppabs="http://v3.bootcss.com/examples/blog/">
        <img src="../examples/screenshots/blog.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/blog.jpg" alt="">
      </a>
      <h4>博客</h4>
      <p>简单的两列式博客布局，还包含了自定义的导航、页头、分类等元素。</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/dashboard/index.htm" tppabs="http://v3.bootcss.com/examples/dashboard/">
        <img src="../examples/screenshots/dashboard.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/dashboard.jpg" alt="">
      </a>
      <h4>控制台</h4>
      <p>包含基本结构的后台管理模板，还有固定的侧边栏和导航条。</p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/signin/index.htm" tppabs="http://v3.bootcss.com/examples/signin/">
        <img src="../examples/screenshots/sign-in.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/sign-in.jpg" alt="">
      </a>
      <h4>登录页</h4>
      <p>自定义的表单布局以及经过简单设计的登录表单。</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/justified-nav/index.htm" tppabs="http://v3.bootcss.com/examples/justified-nav/">
        <img src="../examples/screenshots/justified-nav.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/justified-nav.jpg" alt="">
      </a>
      <h4>Justified nav</h4>
      <p>Create a custom navbar with justified links. Heads up! <a href="../components/index.htm#nav-justified" tppabs="http://v3.bootcss.com/components/#nav-justified">Not too Safari friendly.</a></p>
    </div>
    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/sticky-footer/index.htm" tppabs="http://v3.bootcss.com/examples/sticky-footer/">
        <img src="../examples/screenshots/sticky-footer.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/sticky-footer.jpg" alt="">
      </a>
      <h4>Sticky footer</h4>
      <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/sticky-footer-navbar/index.htm" tppabs="http://v3.bootcss.com/examples/sticky-footer-navbar/">
        <img src="../examples/screenshots/sticky-footer-navbar.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/sticky-footer-navbar.jpg" alt="">
      </a>
      <h4>Sticky footer with navbar</h4>
      <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
    </div>
  </div>

  <h3 id="examples-experiments">Experiments</h3>
  <div class="row bs-examples">
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/non-responsive/index.htm" tppabs="http://v3.bootcss.com/examples/non-responsive/">
        <img src="../examples/screenshots/non-responsive.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/non-responsive.jpg" alt="">
      </a>
      <h4>非响应式 Bootstrap 布局</h4>
      <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
    </div>
    <div class="col-xs-6 col-md-4">
      <a class="thumbnail" href="../examples/offcanvas/index.htm" tppabs="http://v3.bootcss.com/examples/offcanvas/">
        <img src="../examples/screenshots/offcanvas.jpg" tppabs="http://v3.bootcss.com/examples/screenshots/offcanvas.jpg" alt="">
      </a>
      <h4>Offcanvas</h4>
      <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
    </div>
  </div>
</div>

<div class="bs-docs-section">
  <h1 id="community" class="page-header">社区</h1>

  <p class="lead">Bootstrap 有成熟、强大的社区。如果你希望随时获取 Bootstrap 的最新消息，请关注以下社区资源。</p>
  <ul>
    <li>阅读并订阅 <a href="javascript:if(confirm(%27http://blog.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://blog.getbootstrap.com/%27" tppabs="http://blog.getbootstrap.com/">Bootstrap 官方博客</a>。</li>
    <li>通过 IRC （<code>irc.freenode.net</code> 服务器）与其他 Bootstrap 粉丝交流，我们在 <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap 频道</a>。</li>
    <li>如果使用 Bootstrap 过程中遇到问题，请在 <a href="javascript:if(confirm(%27http://stackoverflow.com/questions/tagged/twitter-bootstrap-3  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://stackoverflow.com/questions/tagged/twitter-bootstrap-3%27" tppabs="http://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow 上交流。请搜索 <code>twitter-bootstrap-3</code></a> 关键词。</li>
    <li>参观其他同学基于 Bootstrap 构建的网站，请进这里：<a href="javascript:if(confirm(%27http://expo.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://expo.getbootstrap.com/%27" tppabs="http://expo.getbootstrap.com/">Bootstrap 优站精选</a>.</li>
  </ul>
  <p>你还可以在 Twitter 上关注英文官方账号 <a href="javascript:if(confirm(%27https://twitter.com/twbootstrap  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/twbootstrap%27" tppabs="https://twitter.com/twbootstrap">@twbootstrap </a> ，这里有最新的八卦和有趣的视频。（ :( 原来和技术不沾边啊！）</p>
  <p>中国用户请关注我们的官方微博账号：<a href="javascript:if(confirm(%27http://weibo.com/bootcss  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://weibo.com/bootcss%27" tppabs="http://weibo.com/bootcss">@Bootstrap中文网</a>。我们定期分享新技术和新资讯。</p>
</div>

<div class="bs-docs-section">
  <h1 id="disable-responsive" class="page-header">禁止响应式布局</h1>

  <p class="lead">Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个<a href="../examples/non-responsive/index.htm" tppabs="http://v3.bootcss.com/examples/non-responsive/">非响应式布局实例</a>页面一样。</p>

  <h3>禁止响应式布局有如下几步：</h3>
  <ol>
    <li>移除 <a href="../css/index.htm#overview-mobile" tppabs="http://v3.bootcss.com/css/#overview-mobile">此 CSS 文档</a>中提到的设置浏览器视口（viewport）的标签：<code>&lt;meta&gt;</code>。</li>
    <li>通过为 <code>.container</code> 类设置一个 <code>width</code> 值从而覆盖框架的默认 width 设置，例如 <code>width: 970px !important;</code> 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 <code>!important</code> 。</li>
    <li>如果使用了导航条，需要移除所有导航条的折叠和展开行为。</li>
    <li>对于栅格布局，额外增加 <code>.col-xs-*</code> 类或替换掉 <code>.col-md-*</code> 和 <code>.col-lg-*</code>。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。</li>
  </ol>
  <p>针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持。</p>

  <h3>禁止响应式特性的 Bootstrap 模版</h3>
  <p>我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。</p>
  <p>
    <a href="../examples/non-responsive/index.htm" tppabs="http://v3.bootcss.com/examples/non-responsive/" class="btn btn-primary">非响应式布局实例</a>
  </p>
</div>


<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
  <h4>从 v2.x 版本升级到 v3.x 版本</h4>
  <p>你在找从老版本升级到 Bootstrap v3.x 版本的方法吗？请查看我们整理的<a href="../migration/index.htm" tppabs="http://v3.bootcss.com/migration">升级指南</a>吧。</p>
</div>

<div class="bs-docs-section">
  <h1 id="support" class="page-header">浏览器和设备的支持情况</h1>
  <p class="lead">Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。</p>

  <h3 id="support-browsers">被支持的浏览器</h3>
  <p>特别注意，我们坚决支持这些浏览器的<strong>最新版本</strong>。在 Windows 平台，我们支持<strong> Internet Explorer 8-11</strong>。请看下面列出的详细信息。</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <td></td>
          <th>Chrome</th>
          <th>Firefox</th>
          <th>Internet Explorer</th>
          <th>Opera</th>
          <th>Safari</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Android</th>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">不支持</span></td>
          <td class="text-muted">N/A</td>
        </tr>
        <tr>
          <th>iOS</th>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-muted">N/A</td>
          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">不支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
        </tr>
        <tr>
          <th>Mac OS X</th>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
        </tr>
        <tr>
          <th>Windows</th>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">支持</span></td>
          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">不支持</span></td>
        </tr>
      </tbody>
    </table>
  </div>
  <p>Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表现也是很不错的，虽然我们不对其进行官方支持。</p>
  <p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="../browser-bugs/index.htm" tppabs="http://v3.bootcss.com/browser-bugs/">Wall of browser bugs</a>.</p>

  <h3 id="support-ie8-ie9">Internet Explorer 8 和 9</h3>
  <p>Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多 CSS3 属性和 HTML5 元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外， <strong>Internet Explorer 8 需要 <a href="javascript:if(confirm(%27https://github.com/scottjehl/Respond  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/scottjehl/Respond%27" tppabs="https://github.com/scottjehl/Respond">Respond.js</a> 配合才能实现对媒体查询（media query）的支持。</strong></p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th scope="col" class="col-xs-4">CSS3 特性</th>
          <th scope="col" class="col-xs-4">Internet Explorer 8</th>
          <th scope="col" class="col-xs-4">Internet Explorer 9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row"><code>border-radius</code></th>
          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> 不支持</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> 支持</td>
        </tr>
        <tr>
          <th scope="row"><code>box-shadow</code></th>
          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> 不支持</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> 支持</td>
        </tr>
        <tr>
          <th scope="row"><code>transform</code></th>
          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> 不支持</td>
          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> 支持，但是需要添加 <code>-ms</code> 前缀</td>
        </tr>
        <tr>
          <th scope="row"><code>transition</code></th>
          <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> 不支持</td>
        </tr>
        <tr>
          <th scope="row"><code>placeholder</code></th>
          <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> 不支持</td>
        </tr>
      </tbody>
    </table>
  </div>

  <p>请参考 <a href="javascript:if(confirm(%27http://caniuse.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://caniuse.com/%27" tppabs="http://caniuse.com/">Can I use...</a> 以获取详细的 CSS3 和 HTML5 特性在各个浏览器上的支持情况。</p>

  <h3 id="support-ie8-respondjs">Internet Explorer 8 与 Respond.js</h3>
  <p>在开发环境和生产（线上）环境需要支持 Internet Explorer 8 时，请务必注意下面给出的警告。</p>
  <h4 id="respond-js-x-domain">Respond.js 与 跨域（cross-domain） CSS 的问题</h4>
  <p>如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考 <a href="javascript:if(confirm(%27https://github.com/scottjehl/Respond/blob/master/README.md  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup%27" tppabs="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup"> Respond.js 文档</a> 获取详细信息。</p>
  <h4 id="respond-file-proto">Respond.js 与 <code>file://</code> 协议</h4>
  <p>由于浏览器的安全机制，Respond.js 不能在通过 <code>file://</code> 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性，务必通过 http 协议访问页面（例如搭建 apache、nginx 等）。请参考 <a href="javascript:if(confirm(%27https://github.com/scottjehl/Respond/blob/master/README.md  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats%27" tppabs="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">Respond.js 文档</a>获取更多信息。</p>
  <h4 id="respond-import">Respond.js 与 <code>@import</code> 指令</h4>
  <p>Respond.js 不支持通过 <code>@import</code> 指令所引入的 CSS 文件。例如，Drupal 一般被配置为通过 <code>@import</code> 指令引入CSS文件，Respond.js 对其将无法起到作用。请参考 <a href="javascript:if(confirm(%27https://github.com/scottjehl/Respond/blob/master/README.md  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats%27" tppabs="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">Respond.js 文档</a>获取更多信息。</p>

  <h3 id="support-ie8-box-sizing">Internet Explorer 8 与 box-sizing 属性</h3>
  <p>当 <code>box-sizing: border-box;</code> 与 <code>min-width</code>、<code>max-width</code>、<code>min-height</code> 或 <code>max-height</code> 一同使用时，IE8 不能完全支持 box-sizing 属相。由于此原因，从 Bootstrap v3.0.1 版本开始，我们不再为 <code>.container</code> 赋予 <code>max-width</code> 属性。</p>

  <h3 id="support-ie8-font-face">Internet Explorer 8 与 @font-face</h3>
  <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/issues/13863  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/issues/13863%27" tppabs="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>

  <h3 id="support-ie-compatibility-modes">IE 兼容模式</h3>
  <p>Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此  <code>&lt;meta&gt;</code>  标签加入到你的页面中：</p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;X-UA-Compatible&quot;</span> <span class="na">content=</span><span class="s">&quot;IE=edge&quot;</span><span class="nt">&gt;</span>
</code></pre></div>
  <p>Confirm the document mode by opening the debugging tools: 按 <kbd>F12</kbd> 键打开 IE 的调试模式，看看 IE 当前的渲染模式是什么。</p>
  <p>此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中，为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。</p>
  <p>请参考 <a href="javascript:if(confirm(%27http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge%27" tppabs="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">这个发表在 StackOverflow 上的问题</a>。</p>

  <h3 id="support-ie10-width">Windows 8 中的 Internet Explorer 10 和 Windows Phone 8</h3>
  <p>Internet Explorer 10 并没有对 <strong>屏幕的宽度</strong> 和 <strong>视口（viewport）的宽度</strong> 进行区分，这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。为了解决这个问题，你可以引入下面列出的这段 CSS 代码暂时修复此问题：</p>
<div class="highlight"><pre><code class="scss"><span class="k">@-ms-viewport</span>       <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>
  <p>然而，这样做并不能对 Windows Phone 8 <a href="javascript:if(confirm(%27http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx%27" tppabs="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a> 版本之前的设备起作用，由于这样做将导致 Windows Phone 8 设备按照桌面浏览器的方式呈现页面，而不是较窄的“手机”呈现方式，了解决这个问题，还需要<strong>加入以下 CSS 和 JavaScript 代码来化解此问题</strong>。</p>
<div class="highlight"><pre><code class="scss"><span class="k">@-webkit-viewport</span>   <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@-moz-viewport</span>      <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@-ms-viewport</span>       <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@-o-viewport</span>        <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
<span class="k">@viewport</span>           <span class="p">{</span> <span class="na">width</span><span class="o">:</span> <span class="n">device-width</span><span class="p">;</span> <span class="p">}</span>
</code></pre></div>

<div class="highlight"><pre><code class="js"><span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/IEMobile\/10\.0/</span><span class="p">))</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">msViewportStyle</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">)</span>
  <span class="nx">msViewportStyle</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span>
      <span class="s1">&#39;@-ms-viewport{width:auto!important}&#39;</span>
    <span class="p">)</span>
  <span class="p">)</span>
  <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;head&#39;</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">msViewportStyle</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></div>
  <p>请查看 <a href="javascript:if(confirm(%27http://timkadlec.com/2013/01/windows-phone-8-and-device-width/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://timkadlec.com/2013/01/windows-phone-8-and-device-width/%27" tppabs="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a> 以了解更多信息。</p>
  <p>作为提醒，我们将上面的代码加入到了所有 Bootstrap 文档和实例页面中。</p>

  <h3 id="support-safari-percentages">Safari 对百分比数字凑整的问题</h3>
  <p>从 OS X 版 Safari v7.0.1 和 iOS 版 Safari v7.0.1 开始，Safari 的页面绘制引擎对于处理 <code>.col-*-1</code> 类所对应的很长的百分比小数存在 bug。也就是说，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。我们目前解决不了这个问题 (<a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/issues/9282  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/issues/9282%27" tppabs="https://github.com/twbs/bootstrap/issues/9282">Bug 编号 #9282</a>)，但是你可以避免：</p>
  <ul>
    <li>为最后一列添加 <code>.pull-right</code> 类，将其暴力向右对齐</li>
    <li>手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）</li>
  </ul>
  <p>我们将会继续跟踪此问题，如果有更简易的解决方案，我们会立即更新代码。</p>

  <h3 id="support-fixed-position-keyboards">模态框、导航条和虚拟键盘</h3>
  <h4>Overflow and scrolling</h4>
  <p><code>&lt;body&gt;</code> 元素在 iOS 和 Android 上对 <code>overflow: hidden</code> 的支持很有限。结果就是，在这两种设备上的浏览器中，当你滚动屏幕超过模态框的顶部或底部时，<code>&lt;body&gt;</code> 中的内容将开始随着滚动。</p>
  <h4>虚拟键盘</h4>
  <p>还有，如果你正在使用 fixed 定位的导航条或在模态框上面使用输入框，还会遇到 iOS 在页面绘制上的 bug，当触发虚拟键盘之后，其不会更新 fixed 定位的元素的位置。这里有几种解决方案，包括将 fixed 定位转变为 <code>position: absolute</code> 定位，或者启动一个定时器手工修正组件的位置。这些没有加入 Bootstrap 中，因此，需要由你自己选择最好的解决方案并加入到你的应用中。</p>
  <h4>导航条上的下拉菜单</h4>
  <p>在 iOS 设备上，由于导航组件（nav）的复杂的 z-indexing 属性，<code>.dropdown-backdrop</code> 元素并未被使用。因此，为了关闭导航条上的下拉菜单，必须直接点击下拉菜单上的元素（或者任何其他能够触发 iOS 上 click 事件的元素）。</p>

  <h3 id="support-browser-zooming">浏览器的缩放功能</h3>
  <p>页面缩放功能不可避免的会将某些组件搞得乱七八糟，不光是 Bootstrap ，整个互联网上的所有页面都是这样。针对具体问题，我们或许可以修复它（如果有必要的话，请先搜索一下你的问题，看看是否已有解决方案，然后在向我们提交 issue）。然而，我们更倾向于忽略这些问题，由于这些问题除了一些 hack 手段，一般没有直接的解决方案。</p>

  <h3 id="support-printing">打印机的视口（viewport）</h3>
  <p>即使在新版的浏览器上，打印功能仍然有问题。具体来说，从 Chrome v32 版本开始，不管设置的边距（margin）是多少，打印页面时 Chrome 所用的视口（viewport）宽度都比实际的纸张此存窄很多。这就导致 Bootstrap 激活并展示出针对超小屏幕设备的样式。<a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/issues/12078  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/issues/12078%27" tppabs="https://github.com/twbs/bootstrap/issues/12078">请查看编号 #12078 的 Bug 详情。</a> 我们建议的解决方案：</p>
  <ul>
    <li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li>
    <li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li>
    <li>Add custom media queries to change the grid size breakpoints for print media only.</li>
  </ul>

  <h3 id="support-android-stock-browser">Android stock browser</h3>
  <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
  <h4>Select menus</h4>
  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="javascript:if(confirm(%27http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with%27" tppabs="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">nua</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span>
  <span class="kd">var</span> <span class="nx">isAndroid</span> <span class="o">=</span> <span class="p">(</span><span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Mozilla/5.0&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Android &#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;AppleWebKit&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;Chrome&#39;</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">isAndroid</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;select.form-control&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;form-control&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span> <span class="s1">&#39;100%&#39;</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">})</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div>
  <p>见 <a href="javascript:if(confirm(%27http://jsbin.com/OyaqoDO/2  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://jsbin.com/OyaqoDO/2%27" tppabs="http://jsbin.com/OyaqoDO/2"> JS Bin 上的 demo。</a></p>
</div>

<div class="bs-docs-section">
  <h1 id="third-parties" class="page-header">对第三方组件的支持</h1>
  <p class="lead">虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。</p>

  <h3 id="third-box-sizing">box-sizing 属性</h3>
  <p>某些第三方软件，包括 Google 地图和 Google 定制搜索引擎都会由于 <code>* { box-sizing: border-box; }</code> 的设置而产生冲突，这一设置使 <code>padding</code> 不影响页面元素最终宽度的计算。更多信息请参考 <a href="javascript:if(confirm(%27http://css-tricks.com/box-sizing/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://css-tricks.com/box-sizing/%27" tppabs="http://css-tricks.com/box-sizing/">盒模型与尺寸计算 - CSS Tricks</a>。</p>
  <p>根据不同情况，你可能需要根据情况覆盖（第1种选择）或为所有区域设置（第2种选择）。</p>
<div class="highlight"><pre><code class="scss"><span class="cm">/* Box-sizing resets</span>
<span class="cm"> *</span>
<span class="cm"> * 为了避免 Bootstrap 设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。</span>
<span class="cm"> * 你有两种选择：覆盖单个页面元素或重置整个区域。它们都可以通过纯 CSS 或 LESS 代码的形式实现。</span>
<span class="cm"> */</span>

<span class="cm">/* Option 1A: 通过 CSS 代码覆盖单个页面元素的盒模型 */</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="na">-webkit-box-sizing</span><span class="o">:</span> <span class="no">content</span><span class="o">-</span><span class="n">box</span><span class="p">;</span>
     <span class="na">-moz-box-sizing</span><span class="o">:</span> <span class="no">content</span><span class="o">-</span><span class="n">box</span><span class="p">;</span>
          <span class="na">box-sizing</span><span class="o">:</span> <span class="no">content</span><span class="o">-</span><span class="n">box</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/* Option 1B: 通过使用 Bootstrap 提供的 LESS mixin 覆盖单个页面元素的盒模型 */</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="nc">.box-sizing</span><span class="o">(</span><span class="nt">content-box</span><span class="o">);</span>
<span class="p">}</span>

<span class="cm">/* Option 2A: 通过 CSS 代码重置整个区域 */</span>
<span class="nc">.reset-box-sizing</span><span class="o">,</span>
<span class="nc">.reset-box-sizing</span> <span class="o">*,</span>
<span class="nc">.reset-box-sizing</span> <span class="o">*</span><span class="nd">:before</span><span class="o">,</span>
<span class="nc">.reset-box-sizing</span> <span class="o">*</span><span class="nd">:after</span> <span class="p">{</span>
  <span class="na">-webkit-box-sizing</span><span class="o">:</span> <span class="no">content</span><span class="o">-</span><span class="n">box</span><span class="p">;</span>
     <span class="na">-moz-box-sizing</span><span class="o">:</span> <span class="no">content</span><span class="o">-</span><span class="n">box</span><span class="p">;</span>
          <span class="na">box-sizing</span><span class="o">:</span> <span class="no">content</span><span class="o">-</span><span class="n">box</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/* Option 2B: 通过使用自定义的 LESS mixin 重置整个区域 */</span>
<span class="nc">.reset-box-sizing</span> <span class="p">{</span>
  <span class="k">&amp;</span><span class="o">,</span>
  <span class="o">*,</span>
  <span class="o">*</span><span class="nd">:before</span><span class="o">,</span>
  <span class="o">*</span><span class="nd">:after</span> <span class="p">{</span>
    <span class="nc">.box-sizing</span><span class="o">(</span><span class="nt">content-box</span><span class="o">);</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.element</span> <span class="p">{</span>
  <span class="nc">.reset-box-sizing</span><span class="o">();</span>
<span class="p">}</span>
</code></pre></div>
</div>

<div class="bs-docs-section">
  <h1 id="accessibility" class="page-header">可访问性</h1>
  <p class="lead">Bootstrap 遵循统一的 web 标准，另外，通过做一些少量的修改，还可以让使用 <abbr title="Assistive Technology" class="initialism">辅助设备（AT - Assistive Technology）</abbr>上网的人群访问你的站点。</p>

  <h3>跳过导航区</h3>
  <p>如果你的导航部分包含很多链接，并且在 DOM 结构上也是排列在主内容之前，那么，建议在紧跟 <code>&lt;body&gt;</code> 标签后面添加一个 <code>Skip to main content（直接进入主内容区）</code> 的链接。<a href="javascript:if(confirm(%27http://a11yproject.com/posts/skip-nav-links/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://a11yproject.com/posts/skip-nav-links/%27" tppabs="http://a11yproject.com/posts/skip-nav-links/">(这里解释了这样做的原因)</a></p>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#content&quot;</span> <span class="na">class=</span><span class="s">&quot;sr-only sr-only-focusable&quot;</span><span class="nt">&gt;</span>Skip to main content （直接进入主内容区）<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span> <span class="na">id=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>
    页面的主要内容。
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div>

  <h3>标题嵌套</h3>
  <p>当标题嵌套时 (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>)，你的文档的主标题应该是 <code>&lt;h1&gt;</code> 标签。随后的标题逻辑上就应该使用 <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</code> ，这样，屏幕阅读器就可以构造出页面的内容列表了。</p>
  <p>更多信息请参考： <a href="javascript:if(confirm(%27http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/%27" tppabs="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="javascript:if(confirm(%27http://accessibility.psu.edu/headings  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://accessibility.psu.edu/headings%27" tppabs="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>

  <h3>扩展阅读</h3>
  <ul>
    <li><a href="javascript:if(confirm(%27https://github.com/squizlabs/HTML_CodeSniffer  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/squizlabs/HTML_CodeSniffer%27" tppabs="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
    <li><a href="javascript:if(confirm(%27http://a11yproject.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://a11yproject.com/%27" tppabs="http://a11yproject.com/">The A11Y Project</a></li>
    <li><a href="javascript:if(confirm(%27https://developer.mozilla.org/en-US/docs/Accessibility  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://developer.mozilla.org/en-US/docs/Accessibility%27" tppabs="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
  </ul>
</div>

<div class="bs-docs-section">
  <h1 id="license-faqs" class="page-header">许可证 FAQ</h1>
  <p class="lead">Bootstrap 遵守 MIT 许可证进行发布，2014 Twitter 版权所有。归结为以下几点：</p>

  <h4>必须遵守：</h4>
  <ul>
    <li>Include the license and copyright notice in your works</li>
  </ul>

  <h4>赋予你的权力：</h4>
  <ul>
    <li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
    <li>Use Bootstrap in packages or distributions that you create</li>
    <li>Modify the source code</li>
    <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
  </ul>

  <h4>禁止以下行为：</h4>
  <ul>
    <li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
    <li>Hold the creators or copyright holders of Bootstrap liable</li>
    <li>Redistribute any piece of Bootstrap without proper attribution</li>
    <li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
    <li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
  </ul>

  <h4>It does not require you to:</h4>
  <ul>
    <li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
    <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
  </ul>

  <p>Bootstrap 完整的许可证包含在 <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/master/LICENSE  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/master/LICENSE%27" tppabs="https://github.com/twbs/bootstrap/blob/master/LICENSE">项目仓库</a>中，请参考。</p>
</div>

<div class="bs-docs-section">
  <h1 id="translations" class="page-header">文档翻译</h1>

  <p class="lead">我们的社区成员已经将 Bootstrap 文档翻译成多种语言版本，请根据你的语言习惯选择自己母语版本的文档做参考。</p>
  <ul>
    
      <li><a href="../index.htm" tppabs="http://v3.bootcss.com/" hreflang="zh">Bootstrap 中文文档 (Chinese)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://www.oneskyapp.com/docs/bootstrap/fr  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.oneskyapp.com/docs/bootstrap/fr%27" tppabs="http://www.oneskyapp.com/docs/bootstrap/fr" hreflang="fr">Bootstrap en Français (French)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://holdirbootstrap.de/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://holdirbootstrap.de/%27" tppabs="http://holdirbootstrap.de/" hreflang="de">Bootstrap auf Deutsch (German)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/%27" tppabs="http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/" hreflang="it">Bootstrap in Italiano (Italian)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://bootstrapk.com/BS3/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://bootstrapk.com/BS3/%27" tppabs="http://bootstrapk.com/BS3/" hreflang="ko">Bootstrap 한국어 (Korean)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://www.oneskyapp.com/docs/bootstrap/ru  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.oneskyapp.com/docs/bootstrap/ru%27" tppabs="http://www.oneskyapp.com/docs/bootstrap/ru" hreflang="ru">Bootstrap по-русски (Russian)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://www.oneskyapp.com/docs/bootstrap/es  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://www.oneskyapp.com/docs/bootstrap/es%27" tppabs="http://www.oneskyapp.com/docs/bootstrap/es" hreflang="es">Bootstrap en Español (Spanish)</a></li>
    
      <li><a href="javascript:if(confirm(%27http://twbs.site-konstruktor.com.ua/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://twbs.site-konstruktor.com.ua/%27" tppabs="http://twbs.site-konstruktor.com.ua/" hreflang="uk">Bootstrap ua Українською (Ukrainian)</a></li>
    
  </ul>
  <p><strong class="text-danger">Bootstrap 官方不托管各翻译版本的文档，如遇问题，请联系相应的维护人员。</strong></p>
  <p>如果你发现 Bootstrap 中文文档中存在的问题，请发送邮件至：<a href="mailto:admin@bootcss.com">admin@bootcss.com</a></p>
</div>


        </div>
        <div class="col-md-3">
          <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
            <ul class="nav bs-docs-sidenav">
              
                <li>
  <a href="#download">下载</a>
</li>
<li>
  <a href="#whats-included">包含的内容</a>
  <ul class="nav">
    <li><a href="#whats-included-precompiled">预编译版</a></li>
    <li><a href="#whats-included-source">Bootstrap 源码</a></li>
  </ul>
</li>
<li>
  <a href="#grunt">编译 CSS 和 JavaScript 文件</a>
  <ul class="nav">
    <li><a href="#grunt-installing">安装 Grunt</a></li>
    <li><a href="#grunt-commands">可以使用的 Grunt 命令</a></li>
    <li><a href="#grunt-troubleshooting">除错</a></li>
  </ul>
</li>
<li>
  <a href="#template">基本模板</a>
</li>
<li>
  <a href="#examples">实例精选</a>
  <ul class="nav">
    <li><a href="#examples-framework">Bootstrap 框架的基本用法</a></li>
    <li><a href="#examples-navbars">导航条实战</a></li>
    <li><a href="#examples-custom">自定义组件</a></li>
    <li><a href="#examples-experiments">Experiments</a></li>
  </ul>
</li>
<li>
  <a href="#community">社区</a>
</li>
<li>
  <a href="#disable-responsive">禁止响应式布局</a>
</li>
<li>
  <a href="#migration">从 2.x 版本升级到 3.0 版本</a>
</li>
<li>
  <a href="#support">对浏览器和设备的支持情况</a>
  <ul class="nav">
    <li><a href="#support-browsers">被支持的浏览器</a></li>
    <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
    <li><a href="#support-ie8-respondjs">IE8 与 Respond.js</a></li>
    <li><a href="#support-ie8-box-sizing">IE8 与 box-sizing 属性</a></li>
    <li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
    <li><a href="#support-ie-compatibility-modes">IE 兼容模式</a></li>
    <li><a href="#support-ie10-width">IE10 和 Windows (Phone) 8</a></li>
    <li><a href="#support-safari-percentages">Safari 对百分比数字凑整的问题</a></li>
    <li><a href="#support-fixed-position-keyboards">模态框、导航条和虚拟键盘</a></li>
    <li><a href="#support-browser-zooming">浏览器的缩放功能</a></li>
    <li><a href="#support-printing">打印机的视口（viewport）</a></li>
    <li><a href="#support-android-stock-browser">Android stock browser</a></li>
  </ul>
</li>
<li>
  <a href="#third-parties">对第三方组件的支持</a>
</li>
<li>
  <a href="#accessibility">可访问性</a>
</li>
<li>
  <a href="#license-faqs">许可证 FAQ</a>
</li>
<li>
  <a href="#translations">文档翻译</a>
</li>

              
            </ul>
            <a class="back-to-top" href="#top">
              返回顶部
            </a>
            
          </div>
        </div>
      </div>
    </div>

    <!-- Footer
================================================== -->
<footer class="bs-docs-footer" role="contentinfo">
  <div class="container">
    

    <p>Designed and built with all the love in the world by <a href="javascript:if(confirm(%27http://twitter.com/mdo  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://twitter.com/mdo%27" tppabs="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="javascript:if(confirm(%27http://twitter.com/fat  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://twitter.com/fat%27" tppabs="http://twitter.com/fat" target="_blank">@fat</a>.</p>
    <p>Maintained by the <a href="javascript:if(confirm(%27https://github.com/twbs?tab=members  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs?tab=members%27" tppabs="https://github.com/twbs?tab=members">core team</a> with the help of <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/graphs/contributors  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/graphs/contributors%27" tppabs="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
    <p>本项目源码受 <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/master/LICENSE  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/master/LICENSE%27" tppabs="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> 开源协议保护，文档受 <a href="javascript:if(confirm(%27http://creativecommons.org/licenses/by/3.0/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://creativecommons.org/licenses/by/3.0/%27" tppabs="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> 开源协议保护。</p>
    <ul class="bs-docs-footer-links muted">
      <li>当前版本： v3.2.0</li>
      <li>&middot;</li>
      <li><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap%27" tppabs="https://github.com/twbs/bootstrap">GitHub 仓库</a></li>
      <li>&middot;</li>
      <li><a href="index.htm#examples" tppabs="http://v3.bootcss.com/getting-started/#examples">实例精选</a></li>
      <li>&middot;</li>
      <li><a href="javascript:if(confirm(%27http://v2.bootcss.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://v2.bootcss.com/%27" tppabs="http://v2.bootcss.com/">v2.3.2 中文文档</a></li>
      <li>&middot;</li>
      <li><a href="../about/index.htm" tppabs="http://v3.bootcss.com/about/">关于</a></li>
      <li>&middot;</li>
      <li><a href="javascript:if(confirm(%27http://expo.bootcss.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://expo.bootcss.com/%27" tppabs="http://expo.bootcss.com/">优站精选</a></li>
      <li>&middot;</li>
      <li><a href="javascript:if(confirm(%27http://blog.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://blog.getbootstrap.com/%27" tppabs="http://blog.getbootstrap.com/">官方博客</a></li>
      <li>&middot;</li>
      <li><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/issues?state=open  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/issues?state=open%27" tppabs="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
      <li>&middot;</li>
      <li><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/releases  \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher).  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/releases%27" tppabs="https://github.com/twbs/bootstrap/releases">历史版本</a></li>
    </ul>
  </div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../cdn.bootcss.com/jquery/1.11.1/jquery.min.js" tppabs="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js" tppabs="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../assets/js/docs.min.js" tppabs="http://v3.bootcss.com/assets/js/docs.min.js"></script>





<!-- Analytics
================================================== -->
    <script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F3d8e7fc0de8a2a75f2ca3bfe128e6391' type='text/javascript'%3E%3C/script%3E"));
    </script>
  </body>
</html>
